<template>

    <div class="w-full">
        <div class="text-[#666] text-[14px] mb-4 md:hidden!">Showing our 5 star reviews</div>
        <Swiper :list="['', '', '']" height="auto" class="w-full" :showBtn="false">
            <template #default="{ data, index }">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
                    <div v-for="i in num" :key="i" class="bg-[#fff] p-4 rounded-lg shadow-sm text-left" :class="{
                        'bg-[#f5f5f5]': showImg
                    }">
                        <div class="flex items-center">
                            <v-avatar color="surface-variant" size="50" 
                                image="https://user-images.trustpilot.com/637ce4d97c16f6001549c264/73x73.png"></v-avatar>
                            <div class="ml-2 flex-1 w-full">
                                <div class="font-bold flex justify-between w-full">
                                    <div>
                                        Mark Iannicelli
                                    </div>
                                    <Start />
                                </div>
                                <div class="text-sm text-grey-darken-1">
                                    May 1, 2025
                                </div>
                            </div>
                        </div>
                        <h1 class="text-[14px] font-semibold my-2 line-clamp-2">
                           {{getclip(` CAN'T GO WRONG WITH NICE PATCHES.CON
                            CAN'T GO WRONG WITH NICE PATCHES.CON
                            CAN'T GO WRONG WITH NICE PATCHES.CON`, 75)}}
                        </h1>
                        <div class="text-[14px] text-grey-500">
                            {{ getclip(`My experience with Nice Patches has been great! I have had my Targeted
                            Individual
                            patches
                            made by Nice Patches. I have had center back patches, rockers, and small patches. I have
                            commun Nice Patches. I have had center back patches, rockers, and small patches. I have
                            commun Nice Patches. I have had center back patches, rockers, and small patches. I have
                            commun Nice Patches. I have had center back patches, rockers, and small patches. I have
                            communNice Patches. I have had center back patches, rockers, and small patches. I have
                            communNice Patches. I have had center back patches, rockers, and small patches. I have
                            commun`) }}
                            <a class="inline-block text-[#2d8cf0] ml-2">See more</a>
                        </div>
                        <div v-if="showImg" class="mt-4">
                            <img src="https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp" class="w-full rounded"
                                v-img-auto="'10/8'" />
                        </div>
                    </div>
                </div>
            </template>
        </Swiper>
    </div>

</template>

<script lang="ts" setup>
import { Start } from '../start';
import { Swiper } from '../swiper';
withDefaults(
    defineProps<{
        num?: number;
        showImg?: boolean;
    }>(), {
    num: 1,
    showImg: false
})
const getclip = (text: string, num: number = 305) => {
    return text.slice(0, num) + '...';
}
</script>